{% extends 'base.html' %}
{% block title %}
    乾頤堂监控设备
{% endblock title %}

{% block js %}
    <!-- 加载Chart.js的JS文件 -->
    <!-- 最新的Chart JS 文件 https://cdnjs.com/libraries/Chart.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <!-- 加载本项目创建的chart_json_functions.js的JS文件-->
    {% load static %}
    <script src="{% static "js/chart_functions.js" %}"></script>
    <!-- 加载ajax的JS文件-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
{% endblock js %}

{% block body %}

<div class="container-fluid">
<br><h2 style="color: #666666">乾颐堂设备监控内存利用率</h2><br>
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      {# 设备选择标签卡 #}
      {% for device in devices_list %}
          {% if device == current %}
          <li class="nav-item">
            {# 会把当前设备current设置为active的选择卡 #}
            <a class="nav-link active" href="/monitordevice/mem/{{ device }}/">{{ device }}</a>
          </li>
          {% else %}
          <li class="nav-item">
            <a class="nav-link" href="/monitordevice/mem/{{ device }}/">{{ device }}</a>
          </li>
          {% endif %}
      {% endfor %}
    </ul>
  </div>
  <div class="card-body">
    <!--h5 class="card-title">{{ current }} MEM利用率</h5-->
      <div class='row'>
          <div class='col col-md-2'>
          </div>
          <div class='col col-md-8'>
            {# 内存利用率线性图出现的位置 #}
            <canvas id="chart"></canvas>
          </div>
          <div class='col col-md-2'>
          </div>
      </div>
  </div>
</div>


</div>
{# 绘制内存利用率线性图的JS #}
{# 重点: 如果返回的结果为字符串, 为了防止JS转码, 需要使用"|safe"来防止转码 #}
<script type="text/javascript" language="javascript">
    chart_line('chart', "{{ current }} MEM利用率", {{ mem_time|safe }}, {{ mem_data }}, ['#007bff', '#28a745', '#333333', '#c3e6cb', '#dc3545', '#6c757d']);
</script>
{% endblock body %}
